<script setup lang="ts">
defineOptions({
  name: "Records"
});
import { ref,h} from "vue";
import {getCountByAgent,getListAgentDept,getlistByAgentRecords,getlistTaxSourcesRole,getListDtlAgente,getListMerchantName} from "@/api/commission";
import { ElTooltip } from "element-plus";
import { formatDateTime } from '@/utils';

const size = ref('default')
const background = ref(false)
const disabled = ref(false)
const pageTotal = ref(0)

const loading = ref(false)
let tableData = ref([])
const totalData = ref({})//佣金账户成功金额
const batchNumber = ref("") // 交易批次号/订单编号

const agentDeptList = ref([])//商户来源
const agentDeptValue = ref("")

const amountOptionOptions = ref([])//输入选择商户列表

const serviceCompany = ref([]) //服务公司
const serviceCompanyVal = ref('')

const inputMerchant = ref(""); //输入选择商户

const pickerValue = ref("");//选择时间
const currentPage = ref(1)


//获取成功金额
function getCountByAgentTotal(){
  getCountByAgent().then(
    (res: any) => {
      totalData.value = res?.data;
    }
  )
}
getCountByAgentTotal();

// 输入选择商户的时候
const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        getListMerchantName({ merchantsName: query }).then((res: any) => {
            amountOptionOptions.value = res.rows
        }).finally(() => {
            loading.value = false
        })
    }
}

//获取商户来源
getListAgentDept().then((res:any) =>{
  agentDeptList.value = res.data;
})
// 获取服务公司
getListDtlAgente({ type: 1 }).then((res: any) => {
    serviceCompany.value = res.rows
})
//输入选择商户
const merchantSelectChange = () => {
    const [deptId] = agentDeptList.value
    getListTableData({ deptId: deptId.deptId })
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  getListTableData(val)
}

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getListTableData(val)
}

const amountSelectChange = () => {
    getListTableData()
}
//列表数据
function getListTableData(params?) {
    const [start, end] = getPickerTime()
    const [deptId] = agentDeptList.value
    const _params = {
        pageNum: 1,
        pageSize: 10,
        createTimeStart: start,
        createTimeEnd: end,
        total: 0,
        ...params
    };
    if (batchNumber.value !=='') {
        _params.batchNumber = batchNumber.value
    }
    if (deptId && deptId.deptId) {
        _params.sourceOfDeptId = deptId.deptId
    }
    if (inputMerchant.value !=='') { //输入选择商户
        _params.merchantsName = inputMerchant.value
    }
    if (serviceCompanyVal.value !== '') {
        _params.taxSourcesId = serviceCompanyVal.value
        _params.total = 19
    }
    getlistByAgentRecords({ ..._params }).then((res: any) => {
        tableData.value = res.rows;
        pageTotal.value = res.total;
    });
}
//初始化加载列表
getListTableData();



function getPickerTime() {
    const [startTime, endTime] = pickerValue.value
    const start = new Date(startTime)
    const end = new Date(endTime)
    return startTime ? [formatDateTime(start), formatDateTime(end)] : ''
}
getPickerTime()

// 时间picker变化的时候
const pickerChange = () => {
    getListTableData({
        total: 6
    })
}
// 重置页面
const onReset = () => {
    batchNumber.value = "" //交易批次号/订单编号   
    inputMerchant.value = ''//输入选择商户
    agentDeptValue.value = '' //商户来源
    serviceCompanyVal.value = ''//选择服务公司   
    pickerValue.value = ''
    pageTotal.value = 0
    currentPage.value = 1
    getListTableData();
}
const renderstate = ({ column }) => {
  // return h(ElTooltip, {content: 'dfddfdfd',placement: 'top-start', effect: 'light'}, [column.label])
  return h("span", column.label);
};
</script>
<template>
  <div class="c-page">
    <div class="wrapper">
      <div class="top">
        <div class="label">推广金额结算规则</div>
        <div class="link-wrapper">
          <div class="link">
            <div class="label">下级代理商户：</div>
            <div class="value">推广金额=发放金额*（下级代理-成本费率）*（1-扣点）</div>
          </div>
          <div class="link">
            <div class="label">直系商户：</div>
            <div class="value">推广金额=发放金额*（商户费率-成本费率）*（1-扣点）</div>
          </div>
        </div>
      </div>
      <div class="account-wrapper">
          <div class="item-wrapper">
            <div class="item">
                  <div class="label">成功金额</div>
                  <div class="value font-number-medium">¥{{totalData.totalPayableCount}}</div>
              </div>
              <div class="item">
                  <div class="label">推广金额</div>
                  <div class="value font-number-medium">¥{{totalData.commAmountCount}}</div>
              </div>
              <div class="item">
                  <div class="label">实发笔数</div>
                  <div class="value font-number-medium">¥{{totalData.realNumberCount}}</div>
              </div>
          </div>
      </div>
    </div>
    <div class="search">
      <div class="c-input">
        <el-input
            clearable
            placeholder="请输入交易批次号/订单编号"
            v-model="batchNumber"
          ></el-input>
      </div>
      <div class="c-input">
        <el-select @change="amountSelectChange" remote reserve-keyword filterable :loading="loading" v-model="inputMerchant"
                    :remote-method="remoteMethod" size="large" placeholder="请输入选择商户">
                    <el-option v-for="item in amountOptionOptions" :key="item.id" :label="item.merchantsName"
                        :value="item.merchantsName" />
        </el-select>
      </div>
      <div class="c-input">
        <el-select size="large" v-model="agentDeptValue" placeholder="商户来源" @change="merchantSelectChange">
          <el-option v-for="item in agentDeptList" :key="item.deptId" :label="item.deptName" :value="item.deptId">
          </el-option>
        </el-select>
      </div>
      <div class="c-input">
        <el-select size="large" v-model="serviceCompanyVal" placeholder="请选择服务公司">
          <el-option v-for="item in serviceCompany" :key="item.type" :label="item.name" :value="item.type">
          </el-option>
        </el-select>
      </div>
      <div class="c-input-time">
        <el-date-picker @change="pickerChange" v-model="pickerValue" size="large" type="daterange"
                    range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
        </el-date-picker>
      </div>      
      <div class="search-btn">
        <el-button size="large" class="c-btn" @click="getListTableData">查询</el-button>
        <el-button type="primary" size="large" class="c-btn" @click="onReset">重置</el-button>
      </div>
    </div>
    <div class="c-page__bg">
      <el-table :data="tableData">        
        <el-table-column prop="batchNumber" label="交易批次编号/订单编号" ></el-table-column>
        <el-table-column prop="merchantsInfoIdDisplay" label="商户名称" :show-overflow-tooltip="true"> </el-table-column>
        <el-table-column width="180" prop="taxSourcesIdDisplay" label="服务公司企业"> </el-table-column>
        <el-table-column prop="sourceOfDeptIdDisplay" label="商户来源"> </el-table-column>
        <el-table-column  label="成功金额/下发金额（元）">
            <template  #default="scope">
                {{ scope.row.succeedTotalActualAmount }}/{{ scope.row.totalActualAmount }}
            </template>
          
        </el-table-column>
        <el-table-column  label="成功笔数/下发总笔数"> 
            <template  #default="scope">
                {{ scope.row.realNumber }}/{{ scope.row.shouldNumber }}
            </template>
        </el-table-column>
        
        
      </el-table>
      <div class="pagination-block">
        <el-pagination v-model:current-page="currentPage" :page-size="10" :size="size" :disabled="disabled"
          :background="background" layout="total, prev, pager, next" :total="pageTotal" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.c-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-right:40px;
    .wrapper{
      background: #fff linear-gradient(159deg, rgba(208, 233, 255, .57), rgba(217, 225, 232, .34));
      border-radius: 10px;      
      font-size: 14px;
      .top{
        padding: 1.4814814815vh 1.25vw;
        color: hsla(0, 0%, 54.9%, .8);
        display: flex;
        justify-content: space-between;
        .link-wrapper{        
         .link{
            display: flex;
            justify-content: flex-end;
            white-space: nowrap;
            margin-left: 3.125vw;
            .label{
              width: 100px;
              text-align: right;
            }
          }
        }
      } 
      .account-wrapper{
        background-color: #fff;
        border-radius: 10px;
        padding: 2.2222222222vh 1.25vw;
        .item-wrapper{
          display:flex;
          .item{
            margin-right: 4.1666666667vw;
            .label{
              font-size: 14px;
              color: #8c8c8c;
            }
            .value{
              margin-top: .7407407407vh;
              font-size: 18px;
              color: #262626;
            }
            .font-number-medium {
                font-family: Barlow-m;
            }
          }
        }
      }     
    }
}

.search {
  width: 100%;
  margin-top: 24px;
  margin-bottom: 8px;
  display: flex;
  // align-items: center;
  flex-wrap: wrap;
  .c-input {
    width: 240px !important;
    margin-bottom: 16px;
    margin-right: 16px;
    --el-border-radius-base: 8px;
    --el-input-focus-border-color: var(--main-color) !important;
    --el-component-size: 40px;
    }
  .c-input-time{
    // width:284px;
  }

  .search-btn {
    padding-left: 15px;
    .c-btn{
      height:38px;
      border-radius: 8px;
      box-shadow: 0 0 4px 0 rgba(0, 0, 0, .2);
    }
  }
}

.c-page__bg {
  width: 100%;
  height: 100%;
  margin-top: 25px;
  padding-bottom: 24px;
  flex-direction: column;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.c-text-primary {
  font-size: 14px;
  color: #1C9FFF;
  white-space: nowrap;
  cursor: pointer;
  padding-left: 5px;
  padding-right: 5px;
}

.pagination-block {
  padding-top: 20px;
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
}


.flex-row {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
  font-size: 16px;
  color: #262626;
}              

</style>
